<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增优惠券列')" />
    <th:block th:include="include :: datetimepicker-css" />
    <!--<th:block th:include="include :: bootstrap-fileinput-css" />-->
    <th:block th:include="include :: jasny-bootstrap-css" />
    <th:block th:include="include :: summernote-css" />
    <th:block th:include="include :: select2-css" />
</head>
<body class="white-bg">
<form class="form-horizontal m" id="form-goods-add">
<div class="row m-b-lg">
    <div class="col-sm-12">
        <div class="tabs-container">
            <div class="tabs-left">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a data-toggle="tab" href="#tab-1">优惠券基本信息</a>
                    </li>
                    <li class="">
                        <a data-toggle="tab" href="#tab-8"> 优惠券展示图片</a>
                    </li>
                    <li class="">
                        <a data-toggle="tab" href="#tab-9"> 优惠券详情</a>
                    </li>
                    <li class="">
                        <a data-toggle="tab" href="#tab-10"> 优惠券使用说明</a>
                    </li>
                </ul>
                <div class="tab-content ">
                    <div id="tab-1" class="tab-pane active">
                        <div class="panel-body">
                            <div class="wrapper wrapper-content">
                                <input id="treeId" name="productCategoryId" type="hidden" th:value="${category.id}"/>
                                <input id="relateId" name="relateId" type="hidden"/>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">类型：</label>
                                    <div  class="col-sm-8">
                                        <select name="type" class="form-control select2-multiple" th:with="type=${@dict.getType('sys_goods_type')}">
                                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">商家：</label>
                                    <div class="col-sm-8">
                                        <select name="businessshopId" id="businessshopId" class="form-control select2-multiple" >
                                            <option th:each="shop:${shops}" th:value="${shop.id}" th:text="${shop.name}" th:disabled="${shop.states == '0'}" ></option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">上级分类：</label>
                                    <div class="col-sm-8">
                                        <div class="input-group">
                                            <input class="form-control" type="text" onclick="selectProductCategoryTree()" id="treeName" readonly="true" th:value="${category.name}">
                                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">分组：</label>
                                    <div class="col-sm-8">
                                        <select name="group" id="group" class="form-control select2-multiple"  multiple>
                                            <option th:each="group:${groups}" th:value="${group.id}" th:text="${group.title}"></option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">关联商品：</label>
                                    <div class="col-sm-8">
                                        <div class="input-group">
                                            <input class="form-control" type="text" onclick="selectRelateGoods()" id="relateName" readonly="true">
                                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">编号：</label>
                                    <div class="col-sm-8">
                                        <input name="sn" class="form-control" type="text" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">名称：</label>
                                    <div class="col-sm-8">
                                        <input name="name" class="form-control" type="text" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">价格：</label>
                                    <div class="col-sm-8">
                                        <input name="price" class="form-control" type="text" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">展示图片：</label>
                                    <div class="col-sm-8">
                                            <input id="fileinput-input" name="image" class="form-control" type="text" style="display: None">
                                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                                <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
                                                <div>
                                                    <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span>
                                                        <input name="fileinput-1" id ="fileinput-1" type="file">
                                                    </span>
                                                    <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                                                </div>
                                            </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">是否置顶：</label>
                                    <div class="col-sm-3">
                                        <label class="toggle-switch switch-solid">
                                            <input type="checkbox" id="IsTop" checked>
                                            <span></span>
                                        </label>
                                    </div>
                                    <label class="col-sm-3 control-label">是否上架：</label>
                                    <div class="col-sm-3">
                                        <label class="toggle-switch switch-solid">
                                            <input type="checkbox" id="IsMarketable" checked>
                                            <span></span>
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">点击数：</label>
                                    <div class="col-sm-4">
                                        <input name="hits" class="form-control" type="text" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">市场价：</label>
                                    <div class="col-sm-8">
                                        <input name="marketPrice" class="form-control" type="text" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">月点击数：</label>
                                    <div class="col-sm-8">
                                        <input name="monthHits" class="form-control" type="text" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">月销量：</label>
                                    <div class="col-sm-8">
                                        <input name="monthSales" class="form-control" type="text" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">商品图片：</label>
                                    <div class="col-sm-8">
                                        <input name="productImages" class="form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">总销量：</label>
                                    <div class="col-sm-8">
                                        <input name="sales" class="form-control" type="text" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">库存：</label>
                                    <div class="col-sm-8">
                                        <input name="stock" class="form-control" type="text" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">规格项：</label>
                                    <div class="col-sm-8">
                                        <input name="specificationItems" class="form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">总评分：</label>
                                    <div class="col-sm-8">
                                        <input name="totalScore" class="form-control" type="text" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">周点击数：</label>
                                    <div class="col-sm-8">
                                        <input name="weekHits" class="form-control" type="text" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">周销量：</label>
                                    <div class="col-sm-8">
                                        <input name="weekSales" class="form-control" type="text" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">序号：</label>
                                    <div class="col-sm-8">
                                        <input name="orderId" class="form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">限制购买数量：</label>
                                    <div class="col-sm-8">
                                        <input name="limitSale" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tab-8" class="tab-pane">
                        <div class="panel-body">
                            <div class="col-sm-12">
                                <div class="btn-group-sm" id="toolbar" role="group">
                                    <a class="btn btn-success" onclick="insertRow()">
                                        <i class="fa fa-plus"></i> 新增展示图片
                                    </a>
                                    <a class="btn btn-danger multiple disabled" onclick="removeRow()">
                                        <i class="fa fa-remove"></i> 选择删除
                                    </a>
                                    <a class="btn btn-danger" onclick="removeRowAll()">
                                        <i class="fa fa-remove"></i> 删除所有
                                    </a>
                                    <a class="btn btn-info" onclick="updateRow()">
                                        <i class="fa fa-edit"></i> 更新图片
                                    </a>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12 select-table table-striped">
                                        <table id="bootstrap-table" data-mobile-responsive="true"></table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tab-9" class="tab-pane">
                        <div class="panel-body">
                            <div class="col-sm-12">
                                <div class="ibox-content no-padding">
                                    <div id ="introductionSummernote" class="summernote">
                                        <h2>请填写优惠券的介绍</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tab-10" class="tab-pane">
                        <div class="panel-body">
                            <div class="col-sm-12">
                                <div class="ibox-content no-padding">
                                    <div  id ="useIntroductionSummernote" class="summernote">
                                        <h2>请填写优惠券的介绍</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</form>
</body>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <!--<th:block th:include="include :: bootstrap-fileinput-js" />-->
    <th:block th:include="include :: jasny-bootstrap-js" />
    <th:block th:include="include :: summernote-js" />
    <th:block th:include="include :: select2-js" />
    <script type="text/javascript">
        var prefix = ctx + "normal/goods"
        $("#form-goods-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                var isTop = $("input[id='IsTop']").is(':checked') == true ? 1 : 0;
                var isMarketable = $("input[id='IsMarketable']").is(':checked') == true ?1 : 0;
                var productImageList = $.btTable.bootstrapTable('getData');
                var introduce = $('#introductionSummernote').summernote('code');
                var useIntroduce = $('#useIntroductionSummernote').summernote('code');
                var groupIds = $.form.selectSelects("group");
                console.log(groupIds);
                var data = $.param({'isTop': isTop}) + '&' +
                    $.param({'isMarketable': isMarketable}) + '&' +
                    $.param({'introduce': introduce}) + '&' +
                    $.param({'useIntroduction': useIntroduce}) + '&' +
                    $.param({'productImageList': JSON.stringify(productImageList)}) + '&' +
                    $.param({'groupIds': groupIds}) + '&' +
                    $('#form-goods-add').serialize();
                $.operate.save(prefix + "/add", data);
            }
        }

        $("input[name='monthHitsDate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $(document).ready(function () {
            var options = {

                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                pagination: false,
                uniqueId: "imageId",
                singleSelect: true, //开启单选
                height: 400,
                columns: [{
                    checkbox: true
                },
                    {
                        field: 'imageId',
                        title: '图片id'
                    },
                    {
                        field : 'orderId',
                        title : '序号'
                    },
                    {
                        field : 'image',
                        title : '用户图片',
                        formatter: function(value, row, index) {
                            return $.table.imageView(value);
                        }
                    }]
            };
            $.table.init(options);

            $("#fileinput-1").fileinput({
                'name':'text-1',
                'clearName':true
            });
            $('.summernote').summernote({
                lang: 'zh-CN',
                callbacks:{
                    onImageUpload: function (files) {
                        //上传图片到服务器
                        var formData = new FormData();
                        formData.append('file',files[0]);
                        $.ajax({
                            url : "/common/upload",//后台文件上传接口
                            type : 'POST',
                            data : formData,
                            processData : false,
                            contentType : false,
                            success : function(result) {
                                $('.summernote').summernote('insertImage',result.url);
                            },error:function(){
                                alert("上传失败");
                            }
                        });
                    }
                }
            });
            $("#fileinput-1").on("change.bs.fileinput", function (event, data, previewId, index) {
                var file =  this.files[0];
                if (file == null || file == undefined){
                    alert("置空");
                    return;
                }
                var formFile = new FormData();
                formFile.append("action", "UploadVMKImagePath");
                formFile.append("file", file); //加入文件对象
                var data = formFile;
                $.ajax({
                    url: "/common/upload",
                    type: "POST",
                    data:data,
                    dataType: "json",
                    cache:false,         //不设置缓存
                    processData: false,  // 不处理数据
                    contentType: false,   // 不设置内容类型
                    success: function (result) {
                        console.log(result);
                        if(result.code == 0){
                            $('#fileinput-input').val(result.url);
                            alert("上传完成!");
                        }else{
                            alert("上传失败");
                        }
                    },
                });
            });
        });
        function insertRow() {
            $.modal.open('添加图片', prefix + "/addProductImage");
        }
        function removeRowAll(){
//            $.btTable.bootstrapTable('removeAll')
            var allTableData = $.btTable.bootstrapTable('getData');
            console.log(allTableData);
        }

        /* 删除指定表格行 */
        function removeRow(){
            var ids = $.table.selectColumns("imageId");
            if (ids.length == 0) {
                $.modal.alertWarning("请至少选择一条记录");
                return;
            }
            $.btTable.bootstrapTable('remove', {
                field: 'imageId',
                values: ids
            })
        }
        function updateRow(){
            var row= $.btTable.bootstrapTable('getSelections');
            console.log(row);
            var image = row[0].image;
            var orderId = row[0].orderId;
            var imageId = row[0].imageId;
            var jsonStr = JSON.stringify(row);
            $.modal.open('修改图片',
                prefix + "/editProductImage?" +
                "image=" + image +
                "&orderId=" + orderId +
                "&imageId=" + imageId);
        }


        function selectProductCategoryTree() {
            var treeId = $("#treeId").val();
            var productCategoryId = treeId > 0 ? treeId : 0;
            var url = ctx + "normal/category" + "/selectProductCategoryTree/" + productCategoryId;
            var options = {
                title: '分类选择',
                width: "380",
                url: url,
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        }
        function doSubmit(index, layero){
            var body = layer.getChildFrame('body', index);
            $("#treeId").val(body.find('#treeId').val());
            $("#treeName").val(body.find('#treeName').val());
            layer.close(index);
        }

        function selectRelateGoods() {
            var url = ctx + "normal/goods" + "/selectSingleGoods";
            var title = "优惠券选择";
            $.modal.openFull(title,url);
        }


    </script>
</body>
</html>